<template>
  <div class="onlineCourseFinishDetail">
    <div class="flex mb_40 justify_between" :class="{ mb_20: isView }">
      <div class="flex items_center">
        <div class="blue_hint mr_8" v-if="isView === 1"></div>
        <div class="online_course_detail_title">
          {{
            isView
              ? "线下课名称-问卷名称-主观题答题明细"
              : "讲师评价-主观题答题明细"
          }}
        </div>
        <a-tooltip placement="topLeft" v-if="isView !== 1">
          <template #title>
            <span>统计对象为评价问卷-问答题的答题明细</span>
          </template>
          <InfoCircleOutlined />
        </a-tooltip>
      </div>
      <div v-if="!isView">
        <!-- <a-checkbox v-model:checked="checked"
          >只展示有学员加入的部门</a-checkbox
        > -->
        <a-select
          class="mr_5"
          ref="select"
          v-model:value="course"
          style="width: 120px"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option
            :value="item.id"
            v-for="item in courseData"
            :key="item.id"
            :disabled="item.disabled"
            >{{ item.name }}</a-select-option
          >
        </a-select>
        <a-select
          ref="select"
          v-model:value="evaluation"
          style="width: 120px"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option
            :value="item.id"
            v-for="item in evaluationData"
            :key="item.id"
            :disabled="item.disabled"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </div>
    </div>
    <div v-for="(item, index) in 3" :key="item" class="mb_20">
      <a-popover
        placement="top"
        :overlayStyle="{ width: '400px' }"
        v-if="isView !== 1"
      >
        <template #content>
          问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干
        </template>
        <div class="qs_tit mb_10">
          {{
            index + 1
          }}、问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干
        </div>
      </a-popover>
      <div class="qs_tit mb_10" :class="{ active: isView }" v-else>
        {{
          index + 1
        }}、问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干问答题题干
      </div>
      <a-table :dataSource="dataSource" :columns="columns" :pagination="false">
        <template #student="{ text }">
          <div class="mr_5">{{ text }}</div>
          <div class="name_en">{{ getPY(text) }}</div>
        </template>
        <template #department_name="{ text }">
          <span class="mr_5"> {{ text }} </span>
          <a-tooltip placement="topLeft">
            <template #title>
              <span>{{ text }}</span>
            </template>
            <MessageOutlined v-if="!isView" />
          </a-tooltip>
        </template>
        <!-- <template #question_title="{ text }">
        <a-popover placement="topLeft" :overlayStyle="{ width: '368px' }">
          <template #content>
            {{ text }}
          </template>
          <div class="question_title">
            {{ text }}
          </div>
        </a-popover>
      </template> -->
        <template #student_answer="{ text }">
          <a-popover
            placement="topLeft"
            :overlayStyle="{ width: '368px' }"
            v-if="isView !== 1"
          >
            <template #content>
              {{ text }}
            </template>
            <div class="question_title">
              {{ text }}
            </div>
          </a-popover>
          <div class="question_title" :class="{ active: isView }" v-else>
            {{ text }}
          </div>
        </template>
      </a-table>
      <Pagination
        :currentPage="currentPage"
        :total="Number(total)"
        :pageSize="pageSize"
        @page-change="PageChange"
      />
    </div>
  </div>
</template>

<script>
import { getPinYin } from "@/utils/pinyin.js";
import Pagination from "./Pagination.vue";
import { InfoCircleOutlined, MessageOutlined } from "@ant-design/icons-vue";
export default {
  props: {
    isView: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      getPY: (val) => {
        return getPinYin(val).split(" ").join("");
      },
      courseData: [
        { id: "", name: "选择线下课", disabled: true },
        { id: 1, name: "评价1" },
        { id: 2, name: "评价2" },
        { id: 3, name: "评价3" },
      ],
      evaluationData: [{ id: "", name: "选择问券", disabled: true }],
      evaluation: "",
      course: "",
      checked: true,
      pageSize: 3,
      total: 0,
      currentPage: 1,
      dataSource: [
        {
          student: "张瑶",
          key: "1",
          department_name: "产品部",
          result: "好",
          student_answer:
            "老师讲课的方式特别适合我们，老师讲课的方式特别适合我们，老师讲课的方式特别适合我们，老师讲课的方式特别适合我们，老老师讲课的方式特别适合我们，老师讲课的方式特别适合我们，师讲课的方式特别适合我们，老师讲课的方式特别适合我们，",
        },
        {
          student: "张瑶",
          key: "1",
          department_name: "产品部",
          result: "好",
          student_answer:
            "老师讲课的方式特别适合我们，老师讲课的方式特别适合我们，老师讲课的方式特别适合我们，老师讲课的方式特别适合我们，老师讲课的方式特别适合我们，老师讲课的方式特别适合我们，老师讲课的方式特别适合我们，老师讲课的方式特别适合我们，",
        },
      ],

      columns: [
        {
          width: "33%",
          title: "学员",
          dataIndex: "student",
          key: "student",
          slots: { customRender: "student" },
        },
        {
          width: "33%",
          title: "部门",
          dataIndex: "department_name",
          key: "department_name",
          slots: { customRender: "department_name" },
        },
        // {
        //   width: "20%",
        //   title: "问答题题干",
        //   dataIndex: "question_title",
        //   key: "question_title",
        //   slots: { customRender: "question_title" },
        // },
        {
          title: "学员答案",
          dataIndex: "student_answer",
          key: "student_answer",
          slots: { customRender: "student_answer" },
        },
      ],
    };
  },
  components: { MessageOutlined, InfoCircleOutlined, Pagination },
  methods: {
    focus(val) {},
    handleChange(val) {},
    // 点击页码
    PageChange(page) {
      // this.getUserList(this.pageSize, (page - 1) * this.pageSize);
    },
  },
};
</script>
<style lang="less" scoped>
div {
  font-family: "PingFang SC";
  font-style: normal;
}
.flex {
  display: flex;
}
.items_center {
  align-items: center;
}
.justify_between {
  justify-content: space-between;
}
.mb_10 {
  margin-bottom: 10px;
}
.mb_40 {
  margin-bottom: 40px;
}
.mb_20 {
  margin-bottom: 20px;
}
.mr_8 {
  margin-right: 8px;
}
.mr_5 {
  margin-right: 5px;
}
.onlineCourseFinishDetail {
  // display: inline-block;
  padding: 18px 24px 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #e5e6eb;
}
.online_course_detail_title {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  margin-right: 5px;
}
.question_title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 504px;
  height: 44px;
  &.active {
    overflow: unset;
    text-overflow: unset;
    height: unset;
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
  }
}
.name_en {
  font-size: 12px;
  color: gray;
}
.qs_tit {
  width: 821px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  &.active {
    overflow: unset;
    white-space: unset;
    text-overflow: unset;
    -o-text-overflow: unset;
  }
}
.blue_hint {
  width: 8px;
  height: 22px;
  background: #0093ff;
}
</style>
